<!-- 文章list -->
<template>
  <div class="article_page">
    <Button type="primary" :style="{marginBottom: '10px'}" @click="showModal"><Icon type="ios-add" />新增</Button>
    <Table stripe :columns="columns" :data="articleList" :loading="loading"></Table>
    <Page :total="total" :current="currPage" show-total :style="{marginTop: '20px', float: 'right'}" @on-change="handlePage" />
    <ModalBox ref="modalBox" :currPage="currPage" type="add" @on-update-list="handlePage" />
  </div>
</template>

<script>
  import Btn from './Button';
  import ModalBox from '../../pages/article/Modal';
  import request from '../../utils/request';
  import { Bus, formatTime } from '../../utils/utils';
  export default {
    data() {
      return {
        loading: false,
        articleList: [],
        currPage: 1, // 当前页码
        total: 0,
        columns: [
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '创建/修改时间',
            key: 'createTime',
            render: (h, params) => {
              const { createTime } = params.row;
              return h('span', formatTime(createTime));  // param1:标签  param2:属性（Object） param3:子元素（Array/String）
            }
          },
          {
            title: '描述',
            key: 'desc'
          },
          {
            title: '操作',
            render: (h, params) => {
              return h(Btn, {
                // 对自定义的组件传递属性，增强代码的可读性
                props: {
                  articleId: params.row._id,
                  currPage: this.currPage,
                },
                // 样式
                style: {},
                // 事件
                on: {
                  'on-update-list': (param) => {
                    this.handlePage(param);
                  }
                }
              })
            }
          }
        ]
      }
    },
    components: { ModalBox },
    methods: {
      getArticle() {
        this.loading = true;
        request({
          url: `/article/getArticle?currPage=${this.currPage}`,
        }).then((result) => {
          const { code, list, total } = result;
          if (code === 200) {
            this.articleList = list;
            this.total = total;
          }
        }).catch((err) => {
          console.log(err);
        });
        this.loading = false;
      },
      showModal() {
        this.$refs.modalBox.showModal();
      },
      handlePage(value) {
        this.currPage = value;
        this.getArticle();
      }
    },
    created() {
      // 获取文章list
      this.getArticle();
    }
  }
</script>

<style scoped>

</style>